<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp" %>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="微社区,Q生活" name="keywords"/>
<meta content="微社区,Q生活" name="description"/>
<title>微社区|Q生活</title>
<link rel="stylesheet" href="${ctx }/static/css/Master.css"/>
<link rel="stylesheet" href="${ctx }/static/css/Bombox.css"/>
<link rel="stylesheet" href="${ctx }/static/css/popup.css"/>
<script type="text/javascript" src="${ctx }/static/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="${ctx }/static/js/jsScroller.js"></script>
<script type="text/javascript" src="${ctx }/static/js/jsScrollbar.js"></script>
<%-- 基础js,所有页面都需要引入此js,依赖layer.js --%>
<script src="${ctx}/static/js/common/base.js"></script>
<script src="${ctx}/static/plugins/layer/layer.js"></script>
<script src="${ctx}/static/js/common/util.js"></script>
<script type="text/javascript">
//已选择的id数组
var checkedIds = [];
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
var pIframe = parent.$("#mainIframe").contents(); // 父窗口的iframe
var orgIds = pIframe.find('#orgIds').val();//父窗口id字符串

$(document).ready(function(){
	//为已有和新增的复选框单击事件绑定统计方法
	$("input:checkbox").live("click",function(){
		initCount();
	});
	if(orgIds){
		//根据父窗口已选id,初始化id数组
		var checkedIdsStr = orgIds.split(",");
		for ( var str in checkedIdsStr) {
			checkedIds.push(checkedIdsStr[str]);
		}
	
		//加载右侧表格
		$.ajax({    
		    url:"${ctx}/area/"+orgIds+"/selectByIds",   
		    data:'',    
		    type:"get",    
		    cache:false,    
		    dataType:"text",
		    async:true, //默认为true 异步    
		    success:function(data) {    
		        if(data){
		        	//替换数字为字符串(js数字类型存储java long类型 64位, 过长时会丢失精度)
			    	data = data.replace(/areId\":(\d+),/g,"areId\":\"$1\",");
			    	data = JSON.parse(data);
		        	for(var i = 0;i<data.length;i++){
		        		var item = data[i];
		        		var index =i+1;
		        		var tr = ''+ 
				        	'<tr>'+
								'<td><input id="'+item.areId+'" name="idBox" type="checkbox" value="'+item.areName+'" checked="checked" /></td>'+
								'<td>'+index+'</td>'+
								'<td>'+item.areName+'</td>'+
							'</tr>';
		        		$("#rightTable").append(tr);
		        	}
		        }
		        initCount();
		     }
		});
	}
	
	//初始化左侧表格
	init();
	
	//左侧头部复选框绑定改变事件
	$("#leftAllBox").change(function(){
		var checked = this.checked;
		$("#leftTable [name='idBox']").each(function(){
			this.checked = checked;
		});
		
	});
	
	//右侧头部复选框绑定改变事件
	$("#rightAllBox").change(function(){
		var checked = this.checked;
		$("#rightTable [name='idBox']").each(function(){
			this.checked = checked;
		});
		
	});
	
	//右移按钮单击事件
	$("#rightBtn").click(function(){
		//清除已选择项的选择样式
		$("#rightTable [name='idBox']").each(function(){
			this.checked = false;
		});
		
		var cloneTr = $("#leftTd [name='idBox']:checked").closest("tr").clone();
		cloneTr.each(function(){
			var obj = $(this);
			var id = obj.find("[name='idBox']").attr("id");
			//id未选则右移
			if(!isIn(id)){
				//obj.children("td:eq(1)").remove();
				//obj.children("td:last").remove();
				checkedIds.push(id);
				obj.appendTo($("#rightTable"));
			}else{
				//已存在的项增加选择状态,增加操作的直观体验
				$("#rightTable #"+id)[0].checked = true;
			}
		});
		//初始化滚动条
		initScroll();
		initCount();
	});
	
	//移除按钮单击事件
	$("#leftBtn").click(function(){
		//移除数组id
		$("#rightTd [name='idBox']:checked").each(function(){
			var index = checkedIds.indexOf(this.id);
			if(index > -1){
				checkedIds.splice(index, 1);
			}
		});
		
		$("#rightTd [name='idBox']:checked").closest("tr").remove();
		//初始化滚动条
		initScroll();
		initCount();
	});
});


//异步请求,填充数据
function init(){
	$.ajax({    
	    url:"${ctx}/area/listJson",   
	    data:$("#searchForm").serialize(),    
	    type:"get",    
	    cache:false,    
	    dataType:"text",
	    async:true, //默认为true 异步    
	    success:function(result) {    
	        //清空表格非表头数据
	        $("#leftTable tr:gt(0)").remove();
	      //替换数字为字符串(js数字类型存储java long类型 64位, 过长时会丢失精度)
	    	result = result.replace(/areId\":(\d+),/g,"areId\":\"$1\",");
	    	result = JSON.parse(result);
	        //循环填充表格
	        for(var i=0;i<result.entityList.length;i++){
	        	var item = result.entityList[i];
	        
	        	var tr = ''+ 
		        	'<tr>'+
						'<td><input id="'+item.areId+'" name="idBox" type="checkbox" value="'+item.areName+'" '+(isIn(item.areId)?'checked="checked"':'')+' /></td>'+
						'<td>'+((result.currentPage-1)*result.pageSize+i+1)+'</td>'+
						'<td>'+item.areName+'</td>'+
						//'<td>'+status+'</td>'+
					'</tr>';
		 	    $("#leftTable").append(tr);
	        }
	        
	        //重新填充分页div
	        var pageStr = ''+
	        	'<div class="tab_bot" >'+
					'<div class="page">'+
						'<div class="show_e">'+
							'<input id="totalPage" style="display: none;" value="'+result.totalPage+'"/>'+
							'<span>共'+result.totalRecord+'条&nbsp;&nbsp;&nbsp;第'+result.currentPage+'/'+result.totalPage+'页</span>'+
							'<span>每页显示<select id="pageSize" name="pageSize" onchange="submitPage(1,this);">'+
								'<option '+(result.pageSize==5?'selected="selected"':'')+'>5</option>'+
								'<option '+(result.pageSize==10?'selected="selected"':'')+'>10</option>'+
								'<option '+(result.pageSize==20?'selected="selected"':'')+'>20</option>'+
								'<option '+(result.pageSize==50?'selected="selected"':'')+'>50</option>'+
								'</select>'+
							'</span>'+
							(result.currentPage > 1?'<a href="javascript:void(0);" onclick="submitPage(1,this);">首页</a><a href="javascript:void(0);" onclick="submitPage('+(result.currentPage-1)+',this);">上一页</a>':'')+
							(result.currentPage < result.totalPage?'<a href="javascript:void(0);" onclick="submitPage('+(result.currentPage+1)+',this);">下一页</a><a href="javascript:void(0);" onclick="submitPage('+result.totalPage+',this);">尾页</a>':'')+
							'<span>跳转至<input id="currentPage" name="currentPage" value="'+result.currentPage+'" class="utilInteger"/>页</span>'+
						'</div>'+
						'<span class="combtn"><a href="javascript:void(0);" onclick="btnSubmitPage(this);">确定</a></span>'+
					'</div>'+
				'</div>';
			$("#pageDiv").empty();
			$("#pageDiv").append(pageStr);
			
			// 为新生成的分页输入框增加限制,只能输入整数 来自util.js
			$(".utilInteger").utilOnlyInteger();
			
			//初始化滚动条
			initScroll();
			initCount();
	     }
	});
}

//关闭弹出框
function closeOpen(){
	parent.layer.close(index);
}

//确定
function sure(){
	//名字数组
	var checkedNames = [];
	for(var i=0;i<checkedIds.length;i++){
		checkedNames.push($("#rightTable #"+checkedIds[i]).val());
	}
	pIframe.find('#orgIds').val(checkedIds);
	pIframe.find('#userNames').val(checkedNames.join("，"));
	closeOpen();
}

//跳转到多少页
function btnSubmitPage(item){
	var currentPage = $('#currentPage');
	var totalPage = $('#totalPage');
	
	if(!/^[0-9]*$/.test(currentPage.val())){
		currentPage.val(1);
	}else if(currentPage.val()<1){
		currentPage.val(1);
	}else if(parseInt(currentPage.val()) > parseInt(totalPage.val())){
		currentPage.val(totalPage.val());
	}
	
	submitPage(null,item);
}

//搜索表单提交
function submitPage(val,item){
	if(val){
		$('#currentPage').val(val);
	}
	init();
}

//初始化滚动条
function initScroll(){
	scroller  = new jsScroller(document.getElementById("Scroller-1"), 600, 340-5);
	scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container"), scroller, true);
	scroller  = new jsScroller(document.getElementById("Scroller-2"), 285, 340-5);
	scrollbar = new jsScrollbar (document.getElementById("Scrollbar-Container2"), scroller, true);
}

//id是否在已选择id数组里面
function isIn(id){
	if(checkedIds.indexOf(id)>-1){
		return true;
	}else{
		return false;
	}
}
//计算选中条数和总数
function initCount(){
	$("#leftCount").text($("#leftTd [name='idBox']:checked").length+"/"+$("#leftTd [name='idBox']").length+"条");
	$("#rightCount").text($("#rightTd [name='idBox']:checked").length+"/"+$("#rightTd [name='idBox']").length+"条");
}
</script>
</head>

<body class="utilSubmit">
<form id="searchForm" method="get" >
<div class="Bombox Bombox_2" >
	<div class="BombCon" >
		<div class="BombQZ_con" >
			<!-- 查询 -->
			<input  type="hidden" name="orgType" value="${selectType}">
			<input  type="hidden" name="areType" value="${selectType}">
			<div class="SearchList" >
				<ul class="clearfix">
					<li><span class="name">县/区名称：</span><span class="pt"><input type="text" id="areName" name="areName" value="" /></span></li>
					<li class="combtn pr"><a href="javascript:void(0);" onclick="submitPage(1,this);" class="utilSubmitBtn" >查询</a></li>
				</ul>
			</div>
			
			<table >
			<tr align="center">
			<td width="65%" id="leftTd" class="tdLeft">
			<div class="BombQZ_bot fl" >
				<div class="grayTit">可选区域<span class="grayTitRight" id="leftCount">0/0条</span></div>
				<div class="BombQZ_list" id="Scroller-1" >
					<div class="Scroller-Container">
							<div class="com_table">
								<!-- 左侧内容 -->
								<table id="leftTable" width="100%" cellpadding="0" cellspacing="0">
									<tr>
										<th><input id="leftAllBox" type="checkbox" /></th>
										<th>序号</th>
										<th>县/区名称</th>
									</tr>
								</table>
								
								<%-- 分页 --%>
								<div id="pageDiv">
									<div class="tab_bot" >
										<div class="page">
											<div class="show_e">
												<input id="totalPage" style="display: none;" value=""/>
												<span>共0条&nbsp;&nbsp;&nbsp;第1/1页</span>
												<span>每页显示<select id="pageSize" name="pageSize" >
													<option>5</option>
													<option selected="selected">10</option>
													<option>20</option>
													<option>50</option>
													</select>
												</span>
												<span>跳转至<input id="currentPage" name="currentPage" value="1" class="utilInteger"/>页</span>
											</div>
											<span class="combtn"><a href="javascript:void(0);" >确定</a></span>
										</div>
									</div>
								</div>	
							</div>
					</div>
					<div class="Scrollbar-Container" id="Scrollbar-Container">
					  <div class="Scrollbar-Up"></div>
					  <div class="Scrollbar-Track">
						<div class="Scrollbar-Handle"></div>
					  </div>
					  <div class="Scrollbar-Down"></div>
					</div>
				</div>
			</div>
			
			</td>
			<td>
			<div id="rightBtn" class="arrow arrowL" ></div>
			<div id="leftBtn" class="arrow arrowR" ></div>
			</td>
			<td width="50%" id="rightTd">
			<div class="BombQZ_bot fr" >
				<div class="grayTit">已选区域<span class="grayTitRight" id="rightCount">0/0条</span></div>
				<div class="BombQZ_list" id="Scroller-2" >
					<div class="Scroller-Container">
							<div class="com_table">
								<!-- 右侧内容 -->
								<table id="rightTable" width="100%" cellpadding="0" cellspacing="0">
									<tr>
										<th><input id="rightAllBox" type="checkbox" /></th>
										<th>序号</th>
										<th>县/区名称</th>
									</tr>
								</table>
							</div>
					</div>
					<div class="Scrollbar-Container" id="Scrollbar-Container2">
					  <div class="Scrollbar-Up"></div>
					  <div class="Scrollbar-Track">
						<div class="Scrollbar-Handle"></div>
					  </div>
					  <div class="Scrollbar-Down"></div>
					</div> 
				</div>
			</div>
			</td>
			</tr>
			</table>
		</div>
		<div class="combtn layerbtn"><a href="javascript:void(0);" onclick="sure();">保存</a><a href="javascript:void(0);" onclick="closeOpen();">取消</a></div>
	</div>
</div>
</form>
</body>
</html>
